<!-- 司机流水 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="司机姓名">
                <el-input v-model="formInline.name" placeholder="输入司机姓名"></el-input>
            </el-form-item>

            <el-form-item label="收款人">
                <el-input v-model="formInline.bank" placeholder="输入收款人"></el-input>
            </el-form-item>

            <el-form-item label="电话号码">
                <el-input v-model="formInline.phone" placeholder="输入电话号码"></el-input>
            </el-form-item>
        </CustomForm>

        <el-table :data="list" style="width: 100%;margin-top: 50px;" height="620" v-loading="tableloading">
            <el-table-column prop="driver_user_id" label="司机ID" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="user_name" label="司机姓名" align="center">
                <template slot-scope="scope">
                    {{ $maskString(scope.row.user_name) }}
                </template> 
            </el-table-column>
            <el-table-column prop="sfz" label="身份证号" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-tooltip class="tooltip" :open-delay='500' effect="dark" :content="scope.row.sfz_display" placement="top-start">
                        <el-button>{{scope.row.sfz}}</el-button>
                    </el-tooltip>
                    <!-- <el-button type="primary" size="mini" @click="bankHandler(scope.row.driver_user_id)">银行卡</el-button> -->
                    <!-- <el-button type="primary" size="mini">流水记录</el-button> -->
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="tooltip" :open-delay='500' effect="dark" :content="scope.row.mobile_display" placement="top-start">
                        <el-button>{{scope.row.mobile}}</el-button>
                    </el-tooltip>
                    <!-- <el-button type="primary" size="mini" @click="bankHandler(scope.row.driver_user_id)">银行卡</el-button> -->
                    <!-- <el-button type="primary" size="mini">流水记录</el-button> -->
                </template>
            </el-table-column>
            <el-table-column prop="nhxm" label="收款人姓名" align="center">
            </el-table-column>
            <el-table-column prop="nhk" label="收款账号" align="center">
            </el-table-column>
            <el-table-column prop="nhkhh" label="银行名称" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="bankHandler(scope.row.driver_user_id)">银行卡</el-button>
                    <!-- <el-button type="primary" size="mini">流水记录</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="查看银行卡信息" :visible.sync="dialogVisible" width="60%" custom-class="tax-dialog" top="5vh">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>司机银行卡信息</span>
                </div>
                <el-table :data="bankList" style="width: 100%;" height="200">
                    <el-table-column prop="true_name" label="户名" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="name" label="银行名称" align="center">
                    </el-table-column>
                    <el-table-column prop="yinhang" label="银行卡号" align="center">
                    </el-table-column>
                    <el-table-column prop="add_time" label="操作时间" align="center">
                    </el-table-column>
                    <el-table-column label="类型" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 1" style="color:#008000">默认银行卡</span>
                            <span v-else style="color:#008000">银行卡</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card class="box-card" style="margin-top: 10px;">
                <div slot="header" class="clearfix">
                    <span>司机银行卡变更信息</span>
                </div>
                <el-table :data="bankListUpdate" style="width: 100%;" height="200">
                    <el-table-column prop="true_name" label="户名" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="name" label="银行名称" align="center">
                    </el-table-column>
                    <el-table-column prop="yinhang" label="银行卡号" align="center">
                    </el-table-column>
                    <el-table-column prop="add_time" label="操作时间" align="center">
                    </el-table-column>
                    <el-table-column label="类型" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 1" style="color:#008000">默认银行卡</span>
                            <span v-else style="color:#008000">银行卡</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
import { driverFlow, driverFlowBank } from '@/api/childCompany/moneyManagment'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            formInline: {
                name: "",
                bank: "",
                phone: "",
                page: 1,
                pageSize: 10,
            },

            list: [],
            bankList: [],
            bankListUpdate: [],
            total: 0,
            tableloading: false,
            dialogVisible: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async driverFlow() {
            this.tableloading = true;
            let res = await driverFlow(this.formInline)
            if (res.status == 1) {
                this.list = res.data ? res.data.list : [];
                this.total = res.data ? res.data.count : 0;
            }
            this.tableloading = false;
        },
        onSubmit() {
            this.formInline.page = 1;
            this.driverFlow();
        },
        resetTable() {
            this.formInline = {
                name: "",
                bank: "",
                phone: "",
                page: 1,
                pageSize: 10,
            };

            this.driverFlow();
        },
        handleSizeChange(pageSize) {
            this.formInline.pageSize = pageSize;
            this.driverFlow();
        },
        handleCurrentChange(page) {
            this.formInline.page = page;
            this.driverFlow();
        },
        async bankHandler(id) {
            await this.driverFlowBank(id);
            this.dialogVisible = true;
        },
        async driverFlowBank(id) {
            // console.log(id, "司机id");
            let res = await driverFlowBank({
                driver_user_id: id
            })
            if (res.status == 1) {
                this.bankList = res.data.bank;
                this.bankListUpdate = res.data.bankUpdate;
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        if (this.$route.query) {
            if(this.$route.query.name){
                this.formInline.name = this.$route.query.name;
            }
            if(this.$route.query.bank){
                this.formInline.bank = this.$route.query.bank;
            }
        }
        this.driverFlow();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-pagination {
    margin-top: 30px;
}
.tooltip{
    border: none;
    background-color: transparent;  

}
// .el-button:focus, .el-button:hover
.tooltip:focus,.tooltip:hover{
    color: #606266;
    // border-color: #c6e2ff;
    background-color: transparent;  
}
</style>